<template>
    <div class="clothing-vision-outer">
        <div class="clothing-vision-fixed">
            <div class="clothing-vision">
                <h3><span>All our clothing is intended <br />to <br /> showcase your design vision.</span></h3>
                <ul>
                    <li @click="$router.push('/product/detail?id=110U005')">
                        <figure>
                            <img src="https://img.podpartner.com/static/clothing-images-20231121/110U005.png" alt="">
                        </figure>
                        <h4>
                            <span>190GSM Unisex Loose T-shirt</span>
                            <CommonCurrencyRate :price="1031" type="custom|unit|price" :other="{custom:'From'}" />
                        </h4>
                    </li>
                    <li @click="$router.push('/product/detail?id=140U001')">
                        <figure>
                            <img src="https://img.podpartner.com/static/clothing-images-20231121/140U001.png" alt="">
                        </figure>
                        <h4>
                            <span>370GSM Unisex Heavyweight Oversized Sweatshirt</span>
                            <CommonCurrencyRate :price="1598" type="custom|unit|price" :other="{custom:'From'}" />
                        </h4>
                    </li>
                    <li @click="$router.push('/product/detail?id=130U001')">
                        <figure>
                            <img src="https://img.podpartner.com/static/clothing-images-20231121/130U001.png" alt="">
                        </figure>
                        <h4>
                            <span>380GSM Unisex Fleece-lined Hoodie</span>
                            <CommonCurrencyRate :price="2496" type="custom|unit|price" :other="{custom:'From'}" />
                        </h4>
                    </li>
                    <li @click="$router.push('/product/detail?id=110U017')">
                        <figure class="clothing-vision-li-trans-figure">
                            <img src="https://img.podpartner.com/static/clothing-images-20231121/110U017.png" alt="">
                            <figure class="clothing-vision-li-media">
                                <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-1.png" alt="">
                                <img src="https://img.podpartner.com/static/images-20230202/clothing-style-mask-2.png" alt="">
                                <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-3.png" alt="">
                                <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-1.png" alt="">
                                <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-4.png" alt="">
                                <img src="https://img.podpartner.com/static/images-202305/clothing-style-4.png" alt="">
                                <img src="https://img.podpartner.com/static/images-20230202/clothing-style-mask-2-b.png" alt="">
                            </figure>
                        </figure>
                        <h4>
                            <span>285GSM Unisex Oversized Snow Wash T-shirt</span>
                            <CommonCurrencyRate :price="1671" type="custom|unit|price" :other="{custom:'From'}" />
                        </h4>
                        <cite>

                            <div class="clothing-vision-design-print">
                                <p v-for="item in 18" :key="item">
                                    <cite />
                                </p>
                            </div>
                        </cite>
                    </li>
                    <li @click="$router.push('/product/detail?id=120U007')">
                        <figure>
                            <img src="https://img.podpartner.com/static/clothing-images-20231121/120U007.png" alt="">
                        </figure>
                        <h4>
                            <span>260GSM Unisex Raw Hem Faded Long Sleeve T-shirt</span>
                            <CommonCurrencyRate :price="1819" type="custom|unit|price" :other="{custom:'From'}" />
                        </h4>
                    </li>
                    <li @click="$router.push('/product/detail?id=130U007')">
                        <figure>
                            <img src="https://img.podpartner.com/static/clothing-images-20231121/130U007.png" alt="">
                        </figure>
                        <h4>
                            <span>440GSM Unisex Super Heavyweight Oversized Faded Hoodie</span>
                            <CommonCurrencyRate :price="2985" type="custom|unit|price" :other="{custom:'From'}" />
                        </h4>
                    </li>
                </ul>
                <div class="clothing-vision-design">
                    <dl>
                        <dt><span><em>Time to unlock<br /> your creativity!</em></span></dt>
                        <dd>
                            <h3>Be it a regular<br>placement</h3>
                            <p>Drop and preview your design in our easy-to-use Design Creator. <br /> A single print area can measure up <br /> to <strong><em>16" x 21"</em></strong>, allowing more details and a greater visual impact.</p>
                        </dd>
                        <dd>
                            <h3>Or a cool and <br>fun layout</h3>
                            <p>One of our best features is the vast amount of <br /> design freedom and the delightful, creative <br /> experience you can enjoy. With a maximum of<br /> <strong> <em>18 print areas</em> </strong>per garment, you'll be able to experiment with all your wild ideas and make your clothes shine! </p>
                            <button @click="$router.push('/designer?pid=110U017')">Start now</button>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="clothing-empty"></div>
    </div>

</template>
<script>
export default {
    name: "HomeClothingVision",
    props: {
        scroll: { type: Number, default: 0 }, screenHeight: { type: Number, default: 0 }
    },
    data () {
        return {
            dom: {},
            offsetTop: 0,
        }
    },
    watch: {
        scroll (v) {
            if (v != undefined) {
                // 执行语句
                this.doAnimation()
            } else {
                // 还原
            }
        }
    },
    computed: {
        threshold () {
            let height = this.screenHeight || 0;
            return this.offsetTop - height * 0.8;
        }
    },

    methods: {
        getRate (scroll = 0, start = 0, distance = 0) {
            return Math.min(1, Math.max(scroll - start, 0) / distance)
        },
        doAnimation (scroll = this.scroll) {
            let height = this.screenHeight || 0;
            let diff_scroll = Math.max(scroll - this.threshold, 0);
            // 获取dom
            const { title, ul, figure, design, maskImg, printItem, fixed, print } = this.dom;
            // 动画执行
            let zIndex = diff_scroll > 0 ? 1 : -1; //section的层级
            // 标题
            let rate_title = this.getRate(diff_scroll, 0, height * 0.8);
            // 商品总览
            let rate_ul = this.getRate(diff_scroll, height * 0.5, height * 0.5);
            // 商品内容动画
            let rate_li_bg = this.getRate(diff_scroll, height, height * 0.2);  // 背景色
            let rate_li_h4 = this.getRate(diff_scroll, height * 1.2, height * 0.2);  // 商品名价格
            let rate_li_hide = this.getRate(diff_scroll, height * 1.6, height * 0.3);  // 价格背景隐藏
            let pointerEvents = rate_li_h4 == 1 && rate_li_hide == 0 ? 'auto' : 'none'; //是否可点击

            // 商品总览向上移
            let rate_li_Y = this.getRate(diff_scroll, height * 1.8, height * 1);
            // design 背景
            let rate_design_bg = this.getRate(diff_scroll, height * 2.6, height * 0.2);
            let rate_dl_1 = this.getRate(diff_scroll, height * 2.8, height * 1);
            let rate_dl_2 = this.getRate(diff_scroll, height * 3.8, height * 1);
            let rate_dl_3 = 0;
            let media3_rate1 = this.getRate(diff_scroll, height * 4.8, height * 0.6);
            let media3_rate2 = this.getRate(diff_scroll, height * 5.4, height * 0.6);
            let media3_rate3 = this.getRate(diff_scroll, height * 6, height * 0.6);
            let trans = this.getRate(diff_scroll, height * 6.6, height * 1);

            // 需要组合的数据
            let li_before_opacity = rate_li_bg - rate_li_hide;
            let li_animation_h4 = rate_li_h4 - rate_li_hide * 0.5;
            let figureSize = 240 + 98 * rate_li_Y;
            let dlCount = rate_li_Y * 0.25 + rate_dl_1 * 0.25 + rate_dl_2 * 0.25 + rate_dl_3 * 0.25;

            let mask_border_size = 428 - 236 * rate_dl_1;
            let mask_border_op = rate_dl_1 && rate_dl_2 < 0.25 ? 1 : 0;
            let maskImg_0_op = rate_li_Y == 1 && rate_dl_2 < 0.25 ? 1 : 0;
            let maskImg_6_op = rate_dl_1 == 1 && rate_dl_2 < 0.25 ? 1 : 0;
            let printClass = rate_dl_2 > 0.25 ? 'clothing-vision-design-print show' : 'clothing-vision-design-print';

            let media3_active1 = media3_rate1 > 0 && media3_rate1 < 1 ? 'active' : '';
            let media3_show1 = media3_rate1 > 0 && media3_rate1 < 1 ? 1 : 0;

            let media3_active2 = media3_rate2 > 0 && media3_rate2 < 1 ? 'active' : '';
            let media3_show2 = media3_rate2 > 0 && media3_rate2 < 1 ? 1 : 0;

            let media3_active3 = media3_rate3 > 0 ? 'active' : '';
            let media3_show3 = media3_rate3 > 0 ? 1 : 0;

            // ======== 样式设置部分 ========
            fixed.style.zIndex = zIndex;
            title.style.animationIterationCount = rate_title;
            ul.style.pointerEvents = pointerEvents;
            ul.style.animationIterationCount = rate_ul;
            ul.style.setProperty('--li-before-opacity', li_before_opacity);
            ul.style.setProperty('--li-animation-h4', li_animation_h4);
            // 上层动画 ↑
            ul.style.setProperty('--liAnimationCount', rate_li_Y);
            figure.style.width = `${figureSize}px`
            figure.style.height = `${figureSize}px`
            ul.style.setProperty('--designOpacity', rate_design_bg);

            design.style.setProperty('--dlCount', dlCount);
            maskImg[0].style.opacity = maskImg_0_op;
            maskImg[1].style.opacity = mask_border_op;
            maskImg[1].style.width = `${mask_border_size}px`;
            maskImg[6].style.opacity = maskImg_6_op;
            print.className = printClass; //显示print
            // 轮盘
            printItem[4].className = media3_active1;
            printItem[6].className = media3_active1;
            printItem[1].className = media3_active2;
            printItem[17].className = media3_active3;
            maskImg[2].style.opacity = media3_show1;
            maskImg[3].style.opacity = media3_show2;
            maskImg[4].style.opacity = media3_show3;
            fixed.style.setProperty('--transCount', trans);

        },
        getDoms () {
            let dom = document.querySelector('.clothing-vision-outer')
            let fixed = document.querySelector('.clothing-vision-fixed')
            let section = document.querySelector('.clothing-vision');
            let title = section.querySelector('h3');
            let ul = section.querySelector('ul');
            let lis = ul.querySelectorAll('li');
            let design = section.querySelector('.clothing-vision-design');
            let print = ul.querySelector('.clothing-vision-design-print');
            let figure = ul.querySelector('.clothing-vision-li-trans-figure');
            let printItem = print.querySelectorAll('p');
            let media = ul.querySelector('.clothing-vision-li-media');
            let maskImg = media.querySelectorAll('img');
            // 获取需要操作的元素
            this.dom = { fixed, section, title, ul, lis, design, print, maskImg, printItem, figure };
            this.offsetTop = dom.offsetTop;
        },
    },
    mounted () {
        this.$on('global:homeResize', this.getDoms);
        this.getDoms();
    }
}
</script>
<style scoped lang="scss">
.clothing-vision-outer {
    --scale: 1;
}
.clothing-vision {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32px 150px;
    & > h3 {
        opacity: 1;
        pointer-events: none;
        width: 880px;
        overflow: hidden;
        text-align: center;
        user-select: none;
        white-space: nowrap;
        span {
            display: block;
            background: linear-gradient(225deg, #edb002 0%, #e53bac 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transform: scale(1.0101);
            font-size: 64px;
            font-family: Roboto-Bold, Roboto;
            font-weight: bold;
            color: #000000;
            line-height: 82px;
            padding: 5px;
        }
    }

    & > ul {
        width: 1200px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;

        li {
            margin: 0 20px;
            width: 360px;
            height: 360px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: 50%;
            cursor: pointer;
            & > figure {
                width: 240px;
                height: 240px;
                position: relative;
                img {
                    width: 100%;
                    height: 100%;
                }
                &:hover {
                    transition: 0.3s;
                    transform: scale(1.1);
                }
            }
            h4 {
                z-index: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 240px;
                height: 68px;
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: normal;
                color: #000000;
                line-height: 20px;
                margin-bottom: 8px;
                margin: -4px 0;
                span {
                    display: block;
                    margin: 4px 0;
                    text-align: center;
                }

                .currency-rate {
                    position: relative;
                    font-size: 14px;
                    display: block;
                    margin: 4px 0;
                    text-align: center;
                    &::before {
                        z-index: -1;
                        content: '';
                        display: block;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 132px;
                        height: 28px;
                        background: #ffffff;
                        border-radius: 6px;
                    }
                }
            }
            &::before {
                content: '';
                opacity: 1;
                display: block;
                width: 360px;
                height: 360px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
            }
            &:nth-child(-n + 3) {
                margin-bottom: 60px;
            }
            &:nth-child(1)::before {
                background: #deecf1;
            }
            &:nth-child(2)::before {
                background: #f8f1e9;
            }
            &:nth-child(3)::before {
                background: #dedef1;
            }
            &:nth-child(4)::before {
                background: #eff1de;
            }
            &:nth-child(5)::before {
                background: #deecf1;
            }
            &:nth-child(6)::before {
                background: #f1e5de;
            }
        }
    }
}
.clothing-vision-design {
    width: 1200px;
    min-width: 1200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    > dl {
        width: 548px;
        & > * {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        dt {
            font-family: Roboto-Medium, Roboto;
            span {
                display: block;
                position: relative;
                overflow: hidden;
                margin-left: 5px;
                margin-top: -5px;
            }
            em {
                display: block;
                padding: 5px;
                font-size: 72px;
                font-family: Roboto-Bold, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 92px;
                background: linear-gradient(225deg, #edb002 0%, #e53bac 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                transform: scale(1.02);
            }
        }
        dd {
            h3 {
                font-size: 72px;
                font-family: Roboto-Bold, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 78px;
                margin-bottom: 14px;
            }
            p {
                letter-spacing: -0.6px;
                font-size: 24px;
                font-family: Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 36px;
                strong {
                    display: inline-block;
                    position: relative;
                    overflow: hidden;
                    vertical-align: top;
                    transform: scale(0.94);

                    em {
                        display: block;
                        padding: 5px 4px;
                        font-size: 24px;
                        font-family: Roboto-Medium, Roboto;
                        font-weight: normal;
                        color: #000000;
                        line-height: 26px;
                        background: linear-gradient(
                            270deg,
                            #edb002 0%,
                            #e53bac 100%
                        );
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                        transform: scale(1.05);
                    }
                }
            }
            button {
                pointer-events: all;
                margin-top: 40px;
                width: 178px;
                height: 46px;
                background: #000000;
                border-radius: 24px;
                font-size: 24px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 400;
                color: #ffffff;
                line-height: 22px;
                text-align: left;
                padding: 0 20px;
                position: relative;
                border: 1px solid #fff;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    right: 20px;
                    top: 50%;
                    transform: translateY(-1px) rotate(45deg);
                    transform-origin: right center;
                    width: 12px;
                    height: 3px;
                    border-radius: 2px;
                    background: #fff;
                }
                &::after {
                    content: '';
                    display: block;
                    position: absolute;
                    right: 20px;
                    top: 50%;
                    transform: translateY(-2px) rotate(-45deg);
                    transform-origin: right center;
                    width: 12px;
                    height: 3px;
                    border-radius: 2px;
                    background: #fff;
                }
                &:hover {
                    border-color: #000;
                }
            }
        }
    }
}

// 动画部分css
@media (min-width: 960px) and (min-height: 600px) {
    /* 这里编写需要应用的CSS规则 */
    .clothing-empty {
        transform: scale(var(--scale));
        // height: calc(var(--home-screen-height) * 7.4);
        height: calc(660vh + 120px * var(--scale));
    }
    .clothing-vision-fixed {
        z-index: -1;
        --transCount: 0;
        @keyframes vision-trans {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100vh);
            }
        }
        animation: vision-trans linear 0s forwards;
        animation-iteration-count: var(--transCount);
        &::before {
            content: '';
            display: block;
            position: static;
            height: 200vh;
        }
        width: 100vw;
        height: 100vh;
        padding-top: 78px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        inset: 0;
    }
    .clothing-vision {
        padding: 0;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        & > * {
            opacity: 0;
            pointer-events: none;
            position: absolute;
        }
        & > h3 {
            @keyframes vision-h3-scale {
                0% {
                    opacity: 0;
                    transform: scale(2);
                }
                50% {
                    opacity: 1;
                    transform: scale(var(--scale));
                }
                100% {
                    opacity: 0;
                    transform: scale(var(--scale));
                }
            }
            animation: vision-h3-scale linear 0s forwards;
            animation-iteration-count: 0;
            overflow: hidden;
        }
        & > ul {
            --li-before-opacity: 0;
            --li-animation-h4: 0;
            --liAnimationCount: 0;
            --designOpacity: 0;
            @keyframes vision-ul {
                0% {
                    opacity: 0;
                    transform: scale(2) translateY(0px);
                }
                100% {
                    opacity: 1;
                    transform: scale(var(--scale)) translateY(0px);
                }
            }
            animation: vision-ul linear 0s forwards;
            animation-iteration-count: 0;
            & > li {
                @keyframes vision-li-top {
                    0% {
                        transform: translateY(0);
                    }
                    100% {
                        transform: translateY(-120vh);
                    }
                }
                @keyframes vision-li-center {
                    0% {
                        transform: translate(0, 0);
                    }
                    80% {
                        transform: translate(87px, -183px);
                    }
                    100% {
                        transform: translate(87px, -183px);
                    }
                }
                @keyframes vision-li-img {
                    0% {
                        width: 240px;
                        height: 240px;
                    }
                    100% {
                        width: 338px;
                        height: 338px;
                    }
                }
                &::before {
                    opacity: var(--li-before-opacity);
                }
                &:nth-child(4) {
                    animation: vision-li-center linear 0s forwards;
                    animation-iteration-count: var(--liAnimationCount);
                    & > figure {
                        &::before {
                            content: '';
                            z-index: -1;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            pointer-events: none;
                            opacity: var(--designOpacity);
                            width: 440px;
                            height: 440px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #f5f4f1;
                            border-radius: 50%;
                        }
                    }
                }
                &:not(:nth-child(4)) {
                    animation: vision-li-top linear 0s forwards;
                    animation-iteration-count: var(--liAnimationCount);
                }

                & > h4 {
                    @keyframes vision-li-h4 {
                        0% {
                            opacity: 0;
                            height: 0;
                        }
                        50% {
                            opacity: 0;
                            height: 68px;
                        }
                        100% {
                            opacity: 1;
                            height: 68px;
                        }
                    }
                    animation: vision-li-h4 linear 0s forwards;
                    animation-iteration-count: var(--li-animation-h4);
                }
                & > cite {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, calc(-50% - 30px));
                    pointer-events: none;
                    opacity: var(--designOpacity);
                    width: 440px;
                    height: 440px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: transparent;
                    border-radius: 440px;
                }
            }
        }
    }
    .clothing-vision-li-media {
        position: absolute !important;
        pointer-events: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            opacity: 0;
            z-index: 2;
            position: absolute;
            width: 100%;
            height: 100%;
            // mix-blend-mode: overlay;
            transition: opacity 0.2s;
            pointer-events: none;
            &:nth-child(2) {
                // width: 192px;
                width: 428px;
                height: auto;
            }
            &:nth-last-child(2) {
                opacity: 1;
                z-index: 1;
            }
            &:last-child {
                transform: translateY(114px);
                width: 68px;
                height: auto;
            }
        }
    }
    .clothing-vision-design-print {
        width: 440px;
        height: 440px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        > p {
            opacity: 0;
            box-sizing: border-box;
            position: absolute;
            width: 56px;
            height: 56px;
            background-color: #ffffff;
            box-shadow: 0 0 0 2px rgb(245, 217, 217);
            border: solid 0px;
            border-radius: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotate(0deg) translateY(-260px);
            cite {
                position: absolute;
                width: 36px;
                height: 36px;
                background-image: url('https://img.podpartner.com/static/images-20230202/clothing-style-sprites.png');
                background-size: 180px auto;
                background-position: -36px 0px;
            }
            &:hover,
            &.active {
                transition: 0.3s;
                box-shadow: 0 0 0 4px rgb(225, 150, 150);
            }
            &:nth-child(2) {
                transform: rotate(20deg) translateY(-260px);
                cite {
                    background-position: -72px 0px;
                    transform: rotate(-20deg);
                }
            }
            &:nth-child(3) {
                transform: rotate(40deg) translateY(-260px);
                cite {
                    transform: rotate(-40deg);
                    background-position: 0.5px -36px;
                }
            }
            &:nth-child(4) {
                transform: rotate(60deg) translateY(-260px);
                cite {
                    transform: rotate(-60deg);
                    background-position: -72px -36px;
                    // background-position: -36px -36px;
                }
            }
            &:nth-child(5) {
                transform: rotate(80deg) translateY(-260px);
                cite {
                    transform: rotate(-80deg);
                    // background-position: -72px -36px;
                    background-position: -36px -36px;
                }
            }
            &:nth-child(6) {
                transform: rotate(100deg) translateY(-260px);
                cite {
                    transform: rotate(-100deg);
                    background-position: -108px 0px;
                }
            }
            &:nth-child(7) {
                transform: rotate(120deg) translateY(-260px);
                cite {
                    transform: rotate(-120deg);
                    background-position: -108px -36px;
                }
            }
            &:nth-child(8) {
                transform: rotate(140deg) translateY(-260px);
                cite {
                    transform: rotate(-140deg);
                    background-position: 0px -108px;
                }
            }
            &:nth-child(9) {
                transform: rotate(160deg) translateY(-260px);
                cite {
                    transform: rotate(-160deg);

                    background-position: -36px -72px;
                }
            }
            &:nth-child(10) {
                transform: rotate(180deg) translateY(-260px);
                cite {
                    transform: rotate(-180deg);
                    background-position: -72px -72px;
                }
            }
            &:nth-child(11) {
                transform: rotate(200deg) translateY(-260px);
                cite {
                    transform: rotate(-200deg);
                    background-position: -108px -72px;
                }
            }
            &:nth-child(12) {
                transform: rotate(220deg) translateY(-260px);
                cite {
                    transform: rotate(-220deg);
                    background-position: -144px 0px;
                }
            }
            &:nth-child(13) {
                transform: rotate(240deg) translateY(-260px);
                cite {
                    transform: rotate(-240deg);
                    background-position: -144px -36px;
                }
            }
            &:nth-child(14) {
                transform: rotate(260deg) translateY(-260px);
                cite {
                    transform: rotate(-260deg);
                    background-position: -144px -72px;
                }
            }
            &:nth-child(15) {
                transform: rotate(280deg) translateY(-260px);
                cite {
                    transform: rotate(-280deg);
                    background-position: 0px -108px;
                }
            }
            &:nth-child(16) {
                transform: rotate(300deg) translateY(-260px);
                cite {
                    transform: rotate(-300deg);
                    background-position: 0px 0px;
                }
            }
            &:nth-child(17) {
                transform: rotate(320deg) translateY(-260px);
                cite {
                    transform: rotate(-320deg);
                    background-position: -36px -108px;
                }
            }
            &:nth-child(18) {
                transform: rotate(340deg) translateY(-260px);
                cite {
                    transform: rotate(-340deg);
                    background-position: -72px -108px;
                }
            }
        }
        &.show {
            & > p {
                animation: show-item 0.5s ease-in-out forwards;
                &:nth-child(1) {
                    animation-delay: 0s;
                }
                &:nth-child(2) {
                    animation-delay: 0.01s;
                }
                &:nth-child(3) {
                    animation-delay: 0.03s;
                }
                &:nth-child(4) {
                    animation-delay: 0.05s;
                }
                &:nth-child(5) {
                    animation-delay: 0.07s;
                }
                &:nth-child(6) {
                    animation-delay: 0.1s;
                }
                &:nth-child(7) {
                    animation-delay: 0.13s;
                }
                &:nth-child(8) {
                    animation-delay: 0.16s;
                }
                &:nth-child(9) {
                    animation-delay: 0.2s;
                }
                &:nth-child(10) {
                    animation-delay: 0.24s;
                }
                &:nth-child(11) {
                    animation-delay: 0.28s;
                }
                &:nth-child(12) {
                    animation-delay: 0.32s;
                }
                &:nth-child(13) {
                    animation-delay: 0.36s;
                }
                &:nth-child(14) {
                    animation-delay: 0.4s;
                }
                &:nth-child(15) {
                    animation-delay: 0.44s;
                }
                &:nth-child(16) {
                    animation-delay: 0.5s;
                }
                &:nth-child(17) {
                    animation-delay: 0.56s;
                }
                &:nth-child(18) {
                    animation-delay: 0.62s;
                }
            }
        }
    }

    .clothing-vision-design {
        transform: scale(var(--scale));
        opacity: 1;
        --dlCount: 0;
        > dl {
            & > * {
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            opacity: 0;
            @keyframes design-media-dl {
                0% {
                    opacity: 0;
                    transform: translateY(200vh);
                }
                1% {
                    opacity: 1;
                    transform: translateY(200vh);
                }
                25% {
                    opacity: 1;
                    transform: translateY(100vh);
                }
                50% {
                    opacity: 1;
                    transform: translateY(0);
                }
                75% {
                    opacity: 1;
                    transform: translateY(-100vh);
                }
                100% {
                    opacity: 1;
                    transform: translateY(-200vh);
                }
            }
            animation: design-media-dl linear 0s var(--dlCount) forwards;
        }
    }
}
// 移动端css
@media (max-width: 960px), (max-height: 600px) {
    // 设置静态样式
    .clothing-vision {
        padding-top: 0;
        padding-bottom: 40px;
        z-index: 1 !important;
        background-color: #fff;
        position: relative;
        z-index: auto;
        display: flex;
        flex-direction: column;
        height: auto;
        z-index: -1;
        --transCount: 0 !important;
        * {
            position: relative;
            animation: none;
            opacity: 1;
        }
        h3 {
            position: relative;
            transform: scale(1);
            top: auto;
        }
        ul {
            pointer-events: none;
            animation-iteration-count: 0 !important;
            --li-before-opacity: 0 !important;
            --li-animation-h4: 0 !important;
            margin-top: 40px;
            pointer-events: all;
            --liAnimationCount: 0 !important;
            li {
                margin: 4px 0 !important;
                &::before {
                    opacity: 1;
                }
                & > figure {
                    width: 240px !important;
                    height: 240px !important;
                }
                & > cite {
                    display: none;
                }
                .clothing-vision-li-media {
                    display: none;
                }
                & > figure::before {
                    display: none;
                }
            }
        }
        .clothing-vision-design {
            height: auto;
            .clothing-vision-design-media {
                display: none;
            }
            dl {
                margin-top: 88px;
                height: auto;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                animation: none;
                transform: none;
                dt,
                dd {
                    position: relative;
                    padding-left: 300px;
                    width: 850px;
                    margin-bottom: 100px;
                    height: auto;
                }
                dt,
                dd {
                    &::before {
                        content: '';
                        display: block;
                        position: absolute;
                        width: 240px;
                        height: 240px;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        background-image: url('https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-1.png');
                        background-size: 240px 240px;
                        background-repeat: no-repeat;
                    }
                }
                dd {
                    &:nth-child(2) {
                        &::before {
                            background-image: url('https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-2.png');
                        }
                    }
                    &:nth-child(3) {
                        &::before {
                            background-image: url('https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-3.png');
                        }
                    }
                }
            }
        }
    }
    // 手机端缩放css
    .clothing-vision {
        margin-top: 72px;
        h3 {
            text-align: center;
            height: auto;
            margin-bottom: 16px;
            transform: initial;
            span {
                font-size: 24px;
                color: #000000;
                line-height: 28px;
                transform: initial;
                padding: 0;
            }
        }
        ul {
            margin: -4px 0;
            max-width: 644px;
            width: auto;
            justify-content: space-around;
            overflow: hidden;
            li {
                border-radius: 50%;
                margin: 4px 0;
                width: 162px;
                height: 162px;
                animation: none;
                pointer-events: all;
                &::before {
                    width: 162px;
                    height: 162px;
                }
                figure {
                    animation: none;
                    width: 106px !important;
                    height: 106px !important;
                }
                h4 {
                    width: 126px;
                    height: 60px;
                    justify-content: flex-start;
                    span {
                        font-size: 10px;
                        word-spacing: -0.8px;
                        line-height: 14px;
                    }
                    .currency-rate {
                        display: none;
                    }
                }
                &:nth-child(1) h4 {
                    width: 82px;
                }
            }
        }
        .clothing-vision-design {
            width: auto;
            min-width: auto;
            & > dl {
                margin-top: 80px;
                dt {
                    padding: 0 0 244px 0;
                    width: auto;
                    height: auto;
                    margin-bottom: 90px;

                    span {
                        transform: initial;
                    }
                    em {
                        font-size: 36px;
                        font-weight: bold;
                        line-height: 40px;
                        transform: initial;
                        padding: 0;
                    }
                    &::before {
                        width: 220px;
                        height: 220px;
                        left: 50%;
                        top: auto;
                        bottom: 0;
                        transform: translateX(-50%);
                        background-size: 220px 220px;
                    }
                }
                dd {
                    padding: 0 0 244px 0;
                    width: auto;
                    height: auto;
                    margin-bottom: 90px;
                    h3 {
                        text-align: center;
                        font-size: 36px;
                        line-height: 40px;
                    }
                    p {
                        font-size: 16px;
                        line-height: 22px;
                        text-align: center;
                        strong {
                            font-size: 16px;
                            font-weight: bold;
                            line-height: 22px;
                            transform: inherit;
                            em {
                                padding-top: 0;
                                padding-bottom: 0;
                                font-size: inherit;
                                line-height: inherit;
                            }
                        }
                    }
                    button {
                        margin: 18px auto 0;
                    }
                    &::before {
                        width: 220px;
                        height: 220px;
                        left: 50%;
                        bottom: 0;
                        top: auto;
                        transform: translateX(-50%);
                        background-size: 220px 220px;
                    }
                    &:last-child {
                        padding: 0 0 340px 0;
                        &::before {
                            background-image: url('https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-3.png');
                            width: 320px;
                            height: 320px;
                            background-size: 320px 320px;
                        }
                    }
                }
            }
        }
    }
}
</style>
